<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>num</title>
		<script src="js/jquery.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
				$("#result").click(function(){
					
					var xz=document.getElementsByName("xz");
					var result=0;
					for(var i=0;i<xz.length;i++){
						var xz_=xz[i];
						if(xz_.checked){
							var money=$("#num"+xz_.value).val();
							money=!isNaN(money) ? parseFloat(money):0;
							result=result+money;
						}
					}
					$("#result").val(result);
				});
			});
		</script>
		<style>
			
			.table{border:1px solid #ccc;display: table;border-collapse: collapse;}
			.table li{display: table-row}
			.table li span{display:table-cell;min-width: 150px;min-height:40px;padding:5px;border:1px solid #ccc;}
			.table li:hover{background-color: #f6f6f6;}
		</style>
	</head>
	<body>
		<div >
			<ul style="list-style: none;" class="table">
				<li><span>选择</span><span>序号</span><span>金额</span></li>
				<li><span><input type="checkbox" name="xz" value="1" /></span><span>1</span><span><input name="num1" id="num1" value="20" />	</span></li>
				<li><span><input type="checkbox" name="xz" value="2" /></span><span>2</span><span><input name="num2" id="num2" />	</span></li>
				<li><span><input type="checkbox" name="xz" value="3" /></span><span>3</span><span><input name="num3" id="num3" />	</span></li>
				<li><span><input type="checkbox" name="xz" value="4" /></span><span>4</span><span><input name="num4" id="num4" />	</span></li>
				<li><span>结果：</span><span><input name="result" id="result"/>	</span></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			
			
			
		
		</div>
	</body>
</html>
